<article class="module-account module-account-basic">
    <div class="ui-account-box">
        <h3 class="ui-title">{{ $t('basic.basicInfo') }}</h3>
        <div class="basic-info-box ">
            <div class="box-left">
                <div class="tr" v-if="REG_EMAIL.test(email)">
                    <div class="td">{{ $t('common.email') }}</div>
                    <div class="td">{{email}}</div>
                </div>
                <div class="tr">
                    <div class="td">{{$t('basic.nickname') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>
                            <template v-if="nickname">{{nickname}}</template>
                            <template v-if="!nickname"><a @click="isSettingNickname = true" href="javascript:;">{{$t('basic.set')
                                    }}</a></template>
                        </template>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">{{$t('basic.phone') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>
                            <template v-if="mobile">{{mobile}}</template>
                            <template v-if="!mobile"><a @click="isSettingPhone = true" href="javascript:;">{{$t('basic.set')
                                    }}</a></template>
                        </template>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">{{ $t('common.id') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>{{uid}}</template>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">{{ $t('common.Tincome') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>{{Tincome||0}}USDT</template>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">{{ $t('common.Cincome') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>{{Cincome||0}}USDT</template>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">{{ $t('common.Invite') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>
                            <input style="width: 300px;border:none" id="code" type="text" v-model="Invite"
                                readonly="readonly">
                            <button class="copy-btn" @click="copy('#code')">{{$t('bigwinner.copy')}}</button>
                        </template>

                    </div>
                </div>
                <div class="tr">
                    <div class="td">{{ $t('common.account') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>
                            <template v-if="level==='LEVEL0'">
                                <div style="display: flex;align-items: center;">
                                    <img style="height:20px;margin-right: 10px;" src="../img/no_account.png" alt="">
                                    <a @click="$router.push('/certification')">去认证</a>
                                </div>
                            </template>
                            <template v-if="level==='LEVEL1'">
                                <img style="height:20px;margin-top:8px" src="../img/account1.png" alt="">
                            </template>
                            <template v-if="level==='LEVEL2'">
                                <img style="height:20px;margin-top:8px" src="../img/account2.png" alt="">
                            </template>
                        </template>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">{{ $t('common.partner') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>
                            <template v-if="partner!='VIP1'">
                                <img style="height:20px;margin-top:8px" src="../img/partner.png" alt="">
                            </template>
                            <template v-if="partner==='VIP1'">
                                <img style="height:20px;margin-top:8px" src="../img/a_partner.png" alt="">
                            </template>
                        </template>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">{{ $t('common.super') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>
                            <template v-if="partner!='SUPER_NODE'">
                                <img style="height:20px;margin-top:8px" src="../img/super.jpg" alt="">
                            </template>
                            <template v-if="partner==='SUPER_NODE'">
                                <img style="height:20px;margin-top:8px" src="../img/a_super.jpg" alt="">
                            </template>
                        </template>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">{{ $t('basic.ip') }}</div>
                    <div class="td">
                        <loading type="inline" v-if="isLoading === true"></loading>
                        <template v-else>{{ip}}</template>
                    </div>
                </div>
            </div>
            <!--<div class="box-right" v-if="limit!==''">
                <div class="tr">
                    <div class="td">
                        <span v-if="level==='LEVEL0'">{{$t('basic.veirificationLevel')}} <span class="fn-black fn-bold">0</span></span>
                        <span v-if="level==='LEVEL1'">{{$t('basic.veirificationLevel')}} <span class="fn-black fn-bold">1</span></span>
                        <span v-if="level==='LEVEL2'">{{$t('basic.veirificationLevel')}} <span class="fn-black fn-bold">2</span></span>
                    </div>
                    <div class="td">
                        <a href="#/certification" v-if="level==='LEVEL0'">{{$t('basic.updateToLevel')}} 1</a>
                        <a href="#/certification" v-if="level==='LEVEL1'">{{$t('basic.updateToLevel')}} 2</a>
                    </div>
                </div>
                <div class="tr">
                    <div class="td-text">
                        {{ $t('basic.withdrawlimit')}}：<span class="fn-black fn-bold">{{limit}}</span>
                    </div>
                </div> 
            </div>-->
        </div>
    </div>
    <div class="ui-account-box">
        <h3 class="ui-title">{{ $t('basic.securitySettings') }}</h3>
        <div class="m-info">
            <div class="tr">
                <div class="td-title">{{ $t('basic.loginPassword') }}</div>
                <div class="td-status">{{ $t('basic.settingCompleted') }}</div>
                <div class="td-text">{{ $t('basic.useWhenLogin') }}</div>
                <div class="td-operation">
                    <a href="javascript:;"></a>
                    <a @click="showAddDialog()" href="javascript:;">{{ $t('basic.change') }}</a>
                </div>
            </div>
            <div class="tr">
                <div class="td-title">{{ $t('basic.assetPassword') }}</div>
                <div class="td-status" v-if="isSetPayPassword">{{ $t('basic.settingCompleted') }}</div>
                <div class="td-status" v-if="!isSetPayPassword">{{ $t('basic.unSetting') }}</div>
                <div class="td-text">{{ $t('basic.verifyPasswordTip') }}</div>
                <div class="td-operation">
                    <template v-show="!isSetPayPassword">
                        <a href="javascript:;">&nbsp;</a>
                        <a href="javascript:;" @click="isSetPayPwd=true">{{ $t('basic.set') }}</a>
                    </template>
                    <template v-show="isSetPayPassword">
                        <a href="javascript:;" @click="showResetPayPwd()">{{ $t('basic.reset') }}</a>
                        <a href="javascript:;" @click="showAlterPayPwd()">{{ $t('basic.change') }}</a>
                    </template>
                </div>
            </div>
            <div class="tr">
                <div class="td-title">{{$t('basic.setPay')}}</div>
                <div class="td-status" v-if="states">{{$t('basic.payOn')}}</div>
                <div class="td-status" v-if="!states">{{$t('basic.payOff')}}</div>
                <div class="td-text" v-if="states">{{$t('basic.passwordTextOn')}}</div>
                <div class="td-text" v-if="!states">{{$t('basic.passwordTextOff')}}</div>
                <div class="td-operation">
                    <a href="javascript:;" class="reset-hide">&emsp;&emsp;</a>
                    <div class="td-operation-switch" ref="switch" style="text-align: right" @click="TransactionSet">
                        <span class="switch-icon" :class="{'active': states}"></span>
                        <span class="switch-status" v-if="states">ON</span><span class="switch-status" v-else>OFF</span>
                    </div>
                </div>
            </div>
            <!-- 谷歌验证 -->
            <!-- <div class="tr tr-google">
                <div class="td-title">
                    <img src="../img/google.png" alt="" width="36">
                </div>
                <div class="td-text">{{$t('basic.gtip')}}</div>
                <div class="td-operation">
                    <a href="javascript:;" @click="showResetGoogle" :class="{'reset-hide': !isToggleGoogle}">{{
                        $t('basic.reset') }}</a>
                    <div class="td-operation-switch" ref="switch">
                        <span class="switch-icon" :class="{'active': isToggleGoogle}" @click="toggleGoogle"></span>
                        <span class="switch-status" v-if="isToggleGoogle">ON</span><span class="switch-status"
                            v-else>OFF</span>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
    <div class="ui-account-box">
        <h3 class="ui-title-account">{{$t('basic.iphistory')}}</h3>
        <div class="box-content">
            <div class="table-wrap">
                <div class="m-table">
                    <table>
                        <thead>
                            <tr>
                                <th width="20%">{{ $t('common.time') }}</th>
                                <th width="40%">{{ $t('basic.ip')}}</th>
                                <th width="40%">{{ $t('basic.location')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in ipList" v-if="isIPLoading === false && ipList.length > 0">
                                <td>{{item.createDate | timezone}}</td>
                                <td>{{item.ipAddress}}</td>
                                <td>{{item.ipCountry +' '+item.ipCity}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <loading v-if="isIPLoading"></loading>
                    <no-data v-if="isIPLoading === false && ipList && ipList.length === 0"></no-data>
                </div>
                <pager :page-no="condition.pageNo" :page-size="condition.pageSize" :on-page-change="changePage"
                    :page-num="condition.pageNum"></pager>
            </div>
        </div>
    </div>


    <template class="conponent">
        <alter-pay-pwd v-if="isAlterPayPwd" v-on:showAlterPayPwd='isAlterPayPwd = false'>
        </alter-pay-pwd>
        <trade-pwd v-if="isTradePwd" v-on:showTradePwd='isTradePwd = false'>
        </trade-pwd>
        <reset-pay-pwd>
        </reset-pay-pwd>
        <setlogpwd v-if="isShowAddDialog" v-on:showflag="changeDigStatus">
        </setlogpwd>

        <set-pay-pwd v-if="isSetPayPwd" :onBindingSuccess="setPayPwdSuccess" v-on:hide="isSetPayPwd = false">
        </set-pay-pwd>

        <reset-google v-if="isResetGoogle" v-on:showResetGoogle='isResetGoogle = false'></reset-google>

        <toggle-google v-if="openGoogleAuth" @closeGoogleAuth='closeGoogleAuth'></toggle-google>
        <close-google-dialog v-if="isCloseGoogle === true" v-on:hide="closeGoogleDialog"></close-google-dialog>

        <set-nickname v-if="isSettingNickname" v-on:hide="isSettingNickname = false"
            v-on:success="hideSetSetNickname()"></set-nickname>
        <set-phone v-if="isSettingPhone" v-on:hide="isSettingPhone = false" v-on:success="hideSetPhone()"></set-phone>
        <transaction-set :states="states" v-if="isTransactionSet" @hide="hideIsTransactionSet"></transaction-set>
        <we-chat v-if="isWeChat" :name="type" @hide="hideWeChat" :bingding="bingding" :list="typeList"></we-chat>
    </template>
</article>